<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟主机编辑框</title>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <style>
        .tb{
            width:600px
        }
        .center-css{
            text-align: center;
        }
        .hide{
            display:none;
        }
        .edit-windows{
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: #dddddd;
            opacity: 0.9;
            margin: 0 auto;
            z-index: 9;
        }
        .edit-text{
            text-align: center;
            position: fixed;
            top: 50%;
            left: 50%;
            /* margin-top: 100px; */
            width: 400px;
            margin: -60px 0 0 -200px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div style="width:600px;margin: 0 auto;z-index: 9" >
        <table id="tb" class="tb" border="1">
            <thead class="center-css">
                <tr class="tr-css">
                    <th>HOST</th>
                    <th>PORT</th>
                    <th>OPTION</th>
                </tr>
            </thead>
            <tbody class="center-css">
                <tr>
                    <td typeget="host">192.168.1.100</td>
                    <td typeget="port">22</td>
                    <td>
                        <a>
                            <input name="edit" type="button" value="编辑" />
                        </a>
                        <a>
                            <input name="del" type="button" value="删除" />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td typeget="host">192.168.1.101</td>
                    <td typeget="port">22</td>
                    <td>
                        <a>
                            <input name="edit" type="button" value="编辑" />
                        </a>
                        <a>
                            <input name="del" type="button" value="删除" />
                        </a>
                    </td>
                </tr>
            </tbody>

        </table>
        <span style="float:right;padding-right: 90px;">
            <input name="add" type="button" value="添加" />
        </span>
    </div>
    <div class="hide">
        <div class="edit-windows"></div>
        <div class="edit-text">
            <label for="Host" >主机：</label>
            <input type="text" name="host" /><br /><br />
            <label for="IP" > IP：&nbsp&nbsp&nbsp</label>
            <input type="text" name="port"/><br /><br />
            <a>
                <input name="sure" type="button" value="确定" />
            </a>
            <a>
                <input name="cancel" type="button" value="取消" />
            </a>
        </div>
    </div>

    <script>
//        编辑当前主机事件
        $('input[name="edit"]').click(function(){
            $('.edit-windows').parent().removeClass('hide')
//            获取当前编辑按钮旁边的文本内容
            // $('input[name="edit"]').parent().parent().siblings()
            var tds = $(this).parent().parent().prevAll();
            tds.each(function(){
                //获取td下的typeget的属性值
                var attrVal = $(this).attr('typeget');
                var text = $(this).text();
                $('.edit-text input[name="'+ attrVal+'"]').val(text)
            })
        })
//        删除当前主机事件
        $('input[name="del"]').click(function(){
            $(this).parent().parent().parent().remove()
        })
//        增加主机事件
        $('input[name="add"]').click(function(){
            $('.edit-windows').parent().removeClass('hide');
        })
//        确定修改或者确定添加事件
        $('input[name="sure"]').click(function(){
//            var tds = $(this).parent().prevAll()
//            tds.each(function(){
//                var attrVal = $(this).attr('typeget');
//                var vals = $('.edit-text input[name="'+ attrVal+'"]').val()
//                console.log(vals)
//            })
        })
//        取消事件
        $('input[name="cancel"]').click(function(){
            $('.edit-windows').parent().addClass('hide');
        })
    </script>
</body>
</html>